<template>
  <div class="view-box info-box">
    <info-title title="权限信息" icon="el-icon-s-custom"></info-title>
    <div class="info-content">
      <div class="search-box">
        <el-button type="primary" size="small" @click="addRoleDialog"
          >新增</el-button
        >
        <el-button type="success" size="small" @click="exportUser"
          >导出</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F5F7FA', color: '#606266' }"
        row-key="id"
        class="user-table"
        size="small"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         height="90%"
      >
        <el-table-column prop="name" label="权限名称"></el-table-column>
        <el-table-column prop="url" label="url"></el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <!-- <el-table-column prop="desc" label="排序"></el-table-column> -->
        <el-table-column prop="desc" label="权限描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="updateClick(scope.row)" type="text" size="small"
              >修改</el-button
            >
            <el-button @click="deleteClick(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
     
      <!-- 分页器 -->
      <div class="table-page">
        <el-pagination
          :total="10"
          background
          layout="total,prev, pager, next"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
// 导入标题组件
import infoTitle from "../../../../components/common/info-title";
import {
  getAccesses,
  addRole,
  deletRole,
  deletAccess,
} from "../../../../api/access";
export default {
  inject: ["reload"],
  data() {
    return {
      form: {},
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  components: { infoTitle },
  mounted() {
    getAccesses()
      .then((res) => {
        this.tableData = res.data;
        console.log(this.tableData);
      })
      .catch((err) => {});
  },
  methods: {
    //   进入角色添加页面
    addRoleDialog() {
      this.$router.push({
        path: "/system/access_ae",
      });
    },
    //修改的点击事件
    updateClick(data) {
      this.$router.push({
        name: "access_ae",
        params: data,
      });
    },
    deleteClick(data) {
      deletAccess(data.id).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "菜单删除成功",
            type: "success",
            offset: 70,
          });
          this.reload();
        }
      });
    },
    exportUser() {},
  },
};
</script>

<style scoped>
.view-box {
  padding: 10px;
}
.info-content {
  overflow-y: auto;
  padding: 0.5rem;
}
.user-table {
  height: 100%;
  overflow-y: auto;
}
.search-box {
  margin: 0rem 0.5rem 0.5rem 0.5rem;
  text-align: right;
}
.table-page {
  margin: 0.5rem -5px 0rem 0rem;
  text-align: right;
}
</style>